import React, { useState } from 'react';
import Search from './components/search';
import Create from './components/create';
import CreateUse from './components/createUse';
import { router } from 'umi';
import './style.css';
import { AxStandardCardButtonType, AxStandardCardFilterType } from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardCard } from '@/components/AxList/AxStandardCard';
import { axurl } from '@/shared/axurl';
import { AxColumnEnum } from '@/components/AxList';

const url = axurl.fund.list.data;
const Index: React.FC<any> = props => {
    const [createVisible, setCreateVisible] = useState(false);
    const [createUseVisible, setCreateUseVisible] = useState(false);

    /** 配置操作按钮 */
    const button: AxStandardCardButtonType[] = [
        // {
        //     text: '申请项目经费',
        //     icon: 'plus',
        //     onClick: () => setCreateVisible(true),
        // },
        // {
        //     text: '申请使用',
        //     icon: 'plus',
        //     onClick: () => setCreateUseVisible(true),
        // }
    ];

    const filter: AxStandardCardFilterType[] = [{
        icon: 'plus-circle',
        text: '负责人',
        field: 'isManager',
        value: true,
    }, {
        icon: 'minus-circle',
        text: '使用人',
        field: 'isManager',
        value: false,
    }]

    const createProps = {
        visible: createVisible,
        handleVisible: setCreateVisible,
    };

    const createUseProps = {
        visible: createUseVisible,
        handleVisible: setCreateUseVisible,
    };

    const handleData = (res: any) => {
        return {
            ...res,
            list: res.list.map((i: any) => ({
                id: i.id,
                desc: (
                    <div className="ent-member-card__info">
                        <div className="ent-member-card__name" style={{ display: 'flex' }}>
                            <a className="mr-1">{i.userName}</a>&nbsp;
                        <div className="ent-member-card__labels">
                                <span className={`ax-manager ${i.isManage === false && 'ax-user'}`}>{i.isManage && '负责人' || '使用人'}</span>&nbsp;
                            </div>
                        </div>
                        <div className="ent-member-card__description">
                            <span>项目经费名称：{i.name}</span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>项目经费类型：<AxColumnEnum enumName='itmeType' value={i.itmeType} /></span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>经费本编号：{i.noteNumber}</span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>使用人数：{i.count}</span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>经费总额：￥{i.totalMoney}</span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>可用金额：￥{i.notUseMoney}</span>
                        </div>
                        <div className="ent-member-card__description">
                            <span>锁定金额：￥{i.usingMoney}</span>
                        </div>
                    </div>
                ),
                click: () => router.push({ pathname: '/buyer/fund/data', query: { id: i.id } }),
            }))
        }
    }

    return (
        <>
            <AxStandardCard
                url={url}
                button={button}
                filter={filter}
                AdvancedSearch={Search}
                handleData={handleData}
                requestMethod='getDataX'
            />
            {createVisible && <Create {...createProps} />}
            {createUseVisible && <CreateUse {...createUseProps} />}
        </>
    );
};

export default Index;
